<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>对话deepseek</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
   <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>-->
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        body {
            background-color: #f0f2f5;
            font-family: Arial, sans-serif;
        }
        .chat-container {
            width: 80%;
            height: 90vh;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            margin: 20px auto;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            background-color: #ffffff;
        }
        .chat-header {
            background-color: #409EFF;
            color: white;
            padding: 15px;
            text-align: center;
            font-size: 18px;
            font-weight: bold;
        }
        .chat-messages {
            flex: 1;
            padding: 10px;
            overflow-y: auto;
            background-color: #fff;
        }
        .chat-message {
            margin-bottom: 10px;
            display: flex;
            align-items: flex-start;
        }
        .message-content {
            padding: 10px;
            border-radius: 5px;
            max-width: 75%;
            word-wrap: break-word;
        }
        .user-message {
            background-color: #e0f7fa;
            margin-left: auto;
        }
        .bot-message {
            background-color: #ffe0b2;
        }
        .input-container {
            display: flex;
            padding: 10px;
            background-color: #f9f9f9;
        }
        .input {
            flex: 1;
            margin-right: 10px;
        }
       
    </style>
</head>
<body>
    <div id="app">
        <div class="chat-container">
            <div class="chat-header">与deepseek对话</div>
            <div class="chat-messages" ref="messages">
                <div v-for="(msg, index) in messages" :key="index" class="chat-message">
                    <div :class="['message-content', msg.type === 'user' ? 'user-message' : 'bot-message']">
                        {{ msg.content }}
                    </div>
                </div>
            </div>
            <div class="input-container">
                <div class="input">
                    <el-input class="input"
                    v-model="inputMessage"
                    placeholder="请输入消息"
                    @keyup.enter.native="sendMessage"
                    />
                </div>
                
                <el-button type="primary" @click="sendMessage">发送</el-button>
                
            </div>
        </div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    inputMessage: '',
                    messages: [],
                    botMessage: '',
                    isBotTyping: false,
                };
            },
            methods: {
                async sendMessage() {
                    if (!this.inputMessage) return;
                    this.messages.push({ type: 'user', content: this.inputMessage });
                    this.botMessage = ''; // 清空当前机器人的消息
                    this.messages.push({ type: 'bot', content: this.botMessage }); // 添加一个空的机器人消息框
                    this.isBotTyping = true; // 设置机器人正在输入
                    await this.getResponse(this.inputMessage);
                    this.inputMessage = '';
                },
                async getResponse(message) {
                    try {
                        const response = await fetch(`/ai/stream/chat?msg=${encodeURIComponent(message)}`);
                        if (!response.ok) {
                            throw new Error('网络响应不正常');
                        }
                        const reader = response.body.getReader();
                        const decoder = new TextDecoder('utf-8');
                        let done = false;

                        // 使用 setInterval 逐步更新机器人的消息
                        const intervalId = setInterval(async () => {
                            const { value, done: doneReading } = await reader.read();
                            done = doneReading;
                            const chunk = decoder.decode(value, { stream: true });
                            
                            this.botMessage += this.cleanData(chunk); // 逐步添加机器人的消息
                            // 更新最后一个消息框的内容
                            this.messages[this.messages.length - 1].content = this.botMessage;

                            this.$nextTick(() => {
                                this.$refs.messages.scrollTop = this.$refs.messages.scrollHeight; // 滚动到最新消息
                            });

                            if (done) {
                                clearInterval(intervalId);
                                this.isBotTyping = false; // 机器人输入结束
                            }
                        }, 100); // 每100毫秒更新一次
                    } catch (error) {
                        console.error('Error while fetching data:', error);
                    }
                },
                cleanData(data) {
                    // 清理数据，去掉多余的部分
                    return data.replace(/data:/g, '').replace(/<\/?think>/g, '').replace(/\s+/g, ' ').trim();
                },
            },
        });
    </script>
</body>
</html>